<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false" :style="{margin:'0 -24px',padding:0}">
      <div class="table-page-search-wrapper">
        <h1 style="font-size: 24px;font-weight: bold;">{{ infoQuery.village_name }}-{{ infoQuery.year }}-S{{ infoQuery.season }}</h1>
        <div class="table-page-search-wrapper">
          <template>
            <s-table
              ref="table"
              size="default"
              rowKey="family_no"
              :columns="columns"
              :data="loadData">
              <span slot="serial" slot-scope="text, record, index">
                {{ index + 1 }}
              </span>
              <span slot="action" slot-scope="text, record">
                <template>
                  <a style="text-decoration: underline;" @click="onDetail(record)">{{ record.point_sum }}</a>
                </template>
              </span>
              <span slot="family_no" slot-scope="text, record">
                <template>
                  {{ infoQuery.village_name }}{{ record.family_no }}
                </template>
              </span>
              <span slot="nameMobile" slot-scope="text, record">
                <template>
                  {{ record.fullname }} ({{ record.mobile }})
                </template>
              </span>
            </s-table>
          </template>
        </div>
        <a-button style="margin-top:20px;" @click="$router.go(-1)">返回</a-button>
      </div>
    </a-card>
    <div class="integral-detail">
      <!-- 积分详情 弹出模板 -->
      <integral-detail
        ref="createModal"
        v-if="visible"
        :visible="visible"
        :model="mdl"
        :formData="integralData"
        @cancel="handleCancel"
        @ok="handleOk"
        :okHidden="okHidden"
        :serveList="serveList"
      />
    </div>
  </page-header-wrapper>
</template>

<script>
  import {
    rankInfo
  } from '@/api/bank'
  import {
    STable
  } from '@/components'
  import integralDetail from './modules/data.integral.detail'
  let self
  export default {
    name: 'AdminRankData',
    components: {
      integralDetail,
      STable
    },
    data () {
      return {
        // 积分详情
        visible: false,
        confirmLoading: false,
        okHidden: false,
        mdl: null,
        serveList: [],
        // 分割
        data: [],
        pagination: {},
        loading: false,
        villageList: [],
        yearPickShow: false,
        infoQuery: undefined,
        integralData: undefined,
        formData: {
          village_id: '',
          data_id: '',
          page: 1,
          per_page: 20
        },
        // 表头
        columns: [{
            title: '排名',
            scopedSlots: { customRender: 'serial' }
          },
          {
            title: '家庭编号',
            dataIndex: 'family_no',
            scopedSlots: { customRender: 'family_no' }
          },
          {
            title: '当前季度家庭积分',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          },
          {
            title: '户主（联系方式）',
            scopedSlots: { customRender: 'nameMobile' }
          }
        ],
        // 列表组件 加载家风银行列表
        loadData: async parameter => {
          this.formData['page'] = parameter.pageNo
          this.formData['per_page'] = parameter.pageSize
          const res = await rankInfo(this.formData)
          console.log(res)
          const result = {
            pageNo: res.current_page,
            totalPage: res.last_page,
            data: res.data,
            pageSize: 10,
            totalCount: res.total
          }
          return Promise.resolve(result)
        },
        options: {
          alert: {
            show: true,
            clear: () => {
              this.selectedRowKeys = []
            }
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        }
      }
    },
    filters: {

    },
    mounted () {},
    created (op) {
      self = this
      self.infoQuery = self.$route.query
      self.formData.data_id = self.$route.query.data_id
      self.formData.village_id = self.$route.query.village_id
    },
    computed: {
    },
    methods: {
      onDetail (e) {
        this.mdl = null
        this.visible = true
        this.integralData = { ...e, ...self.infoQuery }
      },
      alt () {
        // 清空年份数据
        this.formData.year = undefined
      },
      emptyFormData () {
        self.formData = {
          village_id: '',
          data_id: '',
          page: 1,
          per_page: 20
        }
      },
      handleOpenChange (status) {
        // 监听年份日历被打开
        self.yearPickShow = status
      },
      // 得到年份选择器的值
      handlePanelChange (value) {
        self.formData.year = value
        self.yearPickShow = false
      },
      onShowSizeChange (current, pageSize) {
        this.page.pageSize = pageSize
      },
      handleOk () {},
      handleCancel () {
        this.visible = false
      }
    }
  }
</script>
